<template>
	<view class="popup">
		<uni-popup ref="popup" type="bottom">
			<view class="popup_bos">
				<view class="popup_title">
					<view class="popup_time font13 font-323232 font-b">{{day}}</view>
					<image @click="Onclose" class="popup_img" src="../static/close.png"></image>
				</view>
				<view class="popup_week">
					<view class="popup_weeklist font-323232 font15" v-for="(item,index) in weekList" :key="index">
						{{item}}
					</view>
				</view>
				<view class="popup_number">
					<view v-for="(item,index) in timeList" :key="index"
						:class="item.date == day?'background_6bcbb6':'background_ffffff'" class="popup_numberlist"
						@click="Ontime(item)">
						<view :class="item.date == day?'font-ffffff':'font-6bcbb6'" class="font13">{{item.getDate?item.getDate:''}}
						</view>
						<view :class="item.date == day?'font-ffffff':'font-c8c8c8'" class="font10">{{item.status?item.status:''}}
						</view>
					</view>
				</view>
				<view class="popup_determine font-ffffff font15" @click="Onconfirm">确 定</view>
			</view>
		</uni-popup>




	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				weekList: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				timeList: [], //数据
				day: '', //选择日期
			};
		},
		methods: {
			//传来得事件
			Onshow(timeList, day) {
				let list = timeList
				if (list[0].get != 1) {
					for (let i = 0; i < 9 - (10 - list[0].get); i++) {
						list.unshift({})
					}
				}
				this.timeList = list
				this.day = day
				this.$refs.popup.open()
			},
			//关闭弹窗
			Onclose() {
				this.$refs.popup.close()
			},
			//选择时间
			Ontime(e) {
				if(e.date){
					this.day = e.date
				}
				
			},
			//确定时间
			Onconfirm() {
				this.$emit('OnComconfirm', this.day)
				this.$refs.popup.close()
			}
		}
	}
</script>

<style>
	/* 内容 */
	.popup_bos {
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0 0;
	}

	/* 弹窗 */
	.popup_title {
		position: relative;
		width: 750rpx;
		height: 106rpx;
	}

	.popup_time {
		width: 750rpx;
		text-align: center;
		height: 106rpx;
		line-height: 106rpx;
	}

	.popup_img {
		height: 36rpx;
		width: 36rpx;
		position: absolute;
		top: 35rpx;
		right: 20rpx;
	}

	.popup_week {
		height: 70rpx;
		width: 750rpx;
		border-top: 1rpx solid #e8eaec;
		border-bottom: 1rpx solid #e8eaec;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
		padding: 0 25rpx;
	}


	.popup_weeklist {
		width: 100rpx;
		text-align: center;
	}

	.popup_number {
		width: 750rpx;
		padding: 20rpx 25rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.popup_numberlist {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}

	.popup_determine {
		height: 80rpx;
		background-color: #6bcbb6;
		line-height: 80rpx;
		text-align: center;
	}

	.background_ffffff {
		background-color: #ffffff;
	}

	.background_6bcbb6 {
		background-color: #6bcbb6;
	}
</style>
